<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="../static/fourm/css/demo1.css">
    <link rel="stylesheet" href="../static/bootstrap.min.css">  
    <script src="../static/jquery.min.js"></script>
    <script src="../static/bootstrap.min.js"></script>
</head>
<body>
    <ul class="breadcrumb">
        <li>系统基础管理</li>
        <li class="active">用户管理</li>
      </ul>
        <div class="layui-btn-group test-table-operate-btn" style="margin-bottom: 10px;">
            <button id="userdelcond" type="button" class="btn btn-danger" >删除选中</button>
            <button id="useradd" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                添加用户
            </button>
        </div>
          <table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate" ></table>

          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            添加用户
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form role="form">
                            <div class="form-group">
                                <label for="name">账号</label>
                                <input name="username" type="text" class="form-control" placeholder="输入账号">
                                <label for="name">姓名</label>
                                <input name="name" type="text" class="form-control" placeholder="输入姓名">
                                <label for="name">年龄</label>
                                <input name="age" type="text" class="form-control" placeholder="输入年龄">
                                <label for="name">电话号码</label>
                                <input name="iphone" autocomplete="new-password" type="text" class="form-control" placeholder="输入电话号码">
                                <label for="name">性别</label>
                                <div>
                                    <label class="radio-inline">
                                        <input type="radio" name="optionsRadiosinline" id="boy" value="男" checked>男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="optionsRadiosinline" id="girl"  value="女"> 女
                                    </label>
                                </div>
                                <label for="name">角色</label>
                                <select class="form-control selector">
                                  <option>普通用户</option>
                                  <option>管理员</option>
                                  <option>超级管理员</option>
                                </select>
                                <label for="name">密码</label>
                                <input name="password" autocomplete="new-password" type="password" class="form-control" placeholder="输入密码">
                            </div>
                         </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary adduserbtn">
                            添加
                        </button>
                    </div>
                </div>
          </div>
          </div>

          <script type="text/html" id="test-table-operate-barDemo">
            <a class="layui-btn layui-btn-xs useredit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs userdel" lay-event="del">删除</a>
          </script>
          <script src="../layuiadmin/layui/layui.js"></script>  
          <script>
        let userlistdata=[];
        let userdelstyle;
        let list=new Array();
          layui.config({
            base: '../layuiadmin/' //静态资源所在路径
          }).extend({
            index: '/lib/index' //主入口模块
          }).use(['index', 'table'], function(){
            var table = layui.table
            ,admin = layui.admin;
          
            table.render({
              elem: '#test-table-operate'
              ,url:"/MS/getuserinfo"
              ,cols: [[
                {type:'checkbox', fixed: 'left'}
                ,{field:'id', width:250, title: 'ID', sort: true, fixed: 'left'}
                ,{field:'username', width:250, title: '账号'}
                ,{field:'rolo', width:300, title: '角色', sort: true}
                ,{width:280, align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
              ]]
              ,page: true
            });
            
            //监听表格复选框选择
            table.on('checkbox(test-table-operate)', function(obj){
                userdelstyle=obj.type;
                userlistdata.push(obj.data.id);
            });

            //监听工具条
            table.on('tool(test-table-operate)', function(obj){
              let data = obj.data;
              if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                  obj.del();
                  layer.close(index);
                  $.ajax({
                      url:"/MS/deluserinfobyid",
                      data:{id:data.id},
                      success:function(response){
                          if(response!=0){
                              layer.msg("删除成功");
                          }else{
                              layer.msg("删除失败，请重新尝试");
                          }
                      }
                  });
                });
              } else if(obj.event === 'edit'){
                layer.alert("<label>ID</label>" +
                    "<input id='id' type='text' class='form-control' value='"+data.id+"' />"+
                    "<label>账号</label>" +
                    "<input id='username' type='text' class='form-control' value='"+data.username+"' />"+
                    "<label>角色</label>" +
                    "<input id='rolo' type='text' class='form-control' value='"+data.rolo+"' />",{
                    btn: ['确定','取消'],
                    yes:function(){
                        $.ajax({
                            url:"/MS/edituserinfo",
                            data:{
                            id:$("#id").val(),
                            username:$("#username").val(),
                            rolo:$("#rolo").val()
                            },
                          success:function(response){
                                if(response!=0){
                                    layer.msg("更新用户信息成功");
                                }else{
                                    layer.msg("更新用户信息失败请重新尝试");
                                }
                                setTimeout(function(){
                                    window.location.reload();
                                },1000);
                          }
                        });
                    }
                });
              }
            });
            
            $('.test-table-operate-btn .layui-btn').on('click', function(){
              var type = $(this).data('type');
              active[type] ? active[type].call(this) : '';
            });

            $("#userdelcond").click(function(){
                if(userdelstyle=="all"){
                    layer.alert('无权限清空数据表', {
                        icon: 5,
                        title: "错误"
                    });
                }else if(userlistdata!=""){
                    $.ajax({
                        url:"/MS/deluserinfobyids",
                        data:{id:userlistdata},
                        traditional: true,//传递数组这里设置为true
                        success:function(respose){
                            if(respose!=0){
                                layer.msg("删除成功");
                            }else{
                                layer.msg("删除失败请重新尝试");
                            }
                            setTimeout(function(){
                                location.reload();
                            },1000);
                        }
                    });
                }else{
                    layer.alert('请选择需要删除的数据', {
                        icon: 5,
                        title: "错误"
                    });
                }
            });

            $(".adduserbtn").click(function(){
                if($("input[name=password]").val()==""){
                    layer.msg("密码不能为空!!!");
                }else{
                    $.ajax({
                        url:"/MS/adduserinfo",
                        data:{
                            faceicon:"",
                            username:$("input[name=username]").val(),
                            name:$("input[name=name]").val(),
                            iphone:$("input[name=iphone]").val(),
                            age:$("input[name=age]").val(),
                            sex:$("input[type='radio']:checked").val(),
                            rolo:$(".selector").val(),
                            password:$("input[name=password]").val()
                        },
                        success:function(respose){
                            if(respose>0){
                                layer.msg("添加用户成功");
                            }else if(respose==-2){
                                layer.msg("该账号以存在!!!")
                            }else{
                                layer.msg("添加失败请重新尝试");
                            }
                            setTimeout(function(){
                                window.location.reload();
                            },1000);
                        }
                    });
                }
            });
          });

          </script>
</body>
</html>